<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<canvas id="mycanvas" width="800px" height="500px" style="border:1px solid #ccc"></canvas>

</body>
</html>
<script type="text/javascript">
	var canvas = document.getElementById("mycanvas");
	var context = canvas.getContext("2d");
	var butterfly = new Image();
	butterfly.src = "D:/桌面/学习总结/大二上半学期/h5/lesson8/butterfly.png";
	butterfly.onload = drawButterflies;

	function drawButterflies(){
		context.drawImage(butterfly,0,0,200,138,0,0,200,138);
		context.drawImage(butterfly,0,0,200,138,200,0,200,138);
		context.drawImage(butterfly,0,0,200,138,400,0,200,138);
		setTimeout(moveButterflies,1000)
	}
	
	function moveButterflies(){
		context.clearRect(0,0,800,500)
		context.drawImage(butterfly,0,0,200,138,0,0,200,138);
		context.drawImage(butterfly,0,0,200,138,200,0,200,138);
		context.drawImage(butterfly,0,0,200,138,400,0,200,138);
	}
</script>